<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>

<script type="text/javascript">
//节点数据格式一 复杂数据格式
/* var nodes = [
	{
		name: "父节点1", 
		children: [{name: "子节点1"},{name: "子节点2"}]
	}
]; */

var nodes = [
	{
		id:1,
		name: "父节点1",
		pId:0
	},
	{	id:2,
		pId:1,
		name:"子节点1"
	},
	{
		id:3,
		pId:1,
		name:"子节点2"
	},
	{
		id:2,
		name: "父节点2",
		pId:0
	},
	{	id:4,
		pId:2,
		name:"子节点1"
	},
	{
		id:5,
		pId:2,
		name:"子节点2"
	}
];

//配置信息js对象
var setting={
		data:{
			//开启使用简单数据结构
			simpleData:{
				//开启简单数据类型
				enable:true,
				//指定节点数据中id的key
				idKey:"id",
				//指定节点数父id的key
				pIdKey:"pId",
				//根节点的id
				rootPid: null
			}
		},
		view : {
			selectedMulti : true //是否开启多选
		},
		check : {
			enable : true //设置是否显示checkbox复选框
		},
		edit : {
			enable : true,//开启节点编辑模式
			//初始化节点调用此函数 
			showRemoveBtn : function(treeId, treeNode) {
				//
				//isParent 为true的时候是父节点 不可删除
				//isParent 为false的时候是子节点 可以删除的
				return !treeNode.isParent;
			},
			//删除按钮的提示信息
			removeTitle : "删除节点",
			//是否显示重新命名按钮
			//showRenameBtn : true
		},
		callback : {
			//点击删除按钮的时候执行此函数
			onRemove : function(event, treeId, treeNode) {
				if (treeNode) {
					console.log(treeNode);
				}
			},
			
			//右击节点触发次函数
			onRightClick:function(event, treeId, treeNode) {
				if (treeNode) {
					console.log(treeNode);
				}
					
			}
			
		}
}
//网页加载完毕执行这个方法
$(function() {
	//使用配置信息和节点数据初始化树
	$.fn.zTree.init($("#treeDemo"), setting, nodes);
})
</script>
</script>
</head>
<body>
<div >
	<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>